<template>
    <el-switch @change="onChildChangeStatus" v-model="status" />
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { childUserStatus } from "../../../api/user"
import { ElLoading, ElMessage } from 'element-plus'

const props = defineProps(['status', 'userId'])
const status = ref(false)
let loading = null

onMounted(() => {
    status.value = props.status === 'true' ? true : false
})

const onChildChangeStatus = () => {
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    childUserStatus({
        userId: props.userId,
        status: status.value ? "0" : "1"
    }).then(res => {
        loading.close()
        ElMessage({ message: res.msg, type: 'success', duration: 5 * 1000 })
    })
}
</script>
